<template>
  <div class="main">
    <div class="w">
      <div class="nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置：课程</el-breadcrumb-item>
          <el-breadcrumb-item>{{courseDetail.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="bigBox">
        <div class="leftBox"><img :src="$store.state.apiFile+courseDetail.fm" alt="" /></div>
        <div class="rightBox">
          <h2>{{courseDetail.name}}</h2>
          <span class="best" v-for="(item,index) in courseDetail.CourseFlags" :key="index">{{item.Flag.name}}</span>
          <p>
            <span>章节数 {{courseDetail.Chapters.length}} 章 {{courseDetail.chapterCount}} 节</span> <span>总时长 60小时23分</span
            ><span>北京大学</span>
          </p>
          <p>
            <span><b>24</b> 所学校引用</span> <span><b>2021</b> 次引用</span>
          </p>
          <p>
            <el-button>申请入驻平台</el-button
            ><el-button type="primary">引用该课程</el-button>
          </p>
        </div>
      </div>
      <div class="lessons">
        <div class="lessDetais">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程介绍" name="first">
              <div class="blockList">
                <div class="smallTitle">课程概述</div>
                <div class="cont" v-html="courseDetail.content">
                  
                </div>
              </div>
              <div class="blockList">
                <div class="smallTitle">授课目标</div>
                <div class="cont" v-html="courseDetail.target">
                </div>
              </div>
              <div class="blockList">
                <div class="smallTitle">课本概述</div>
                <div class="cont" v-html="courseDetail.books">
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程目录" name="second">
              <el-collapse v-model="mulu" accordion>
                <el-collapse-item
                  v-for="(item,index) in courseDetail.Chapters"
                  :key="index"
                  :title="item.name"
                  :name="index"
                >
                  <div v-for="(it,i) in item.children" :key="i">
                    <div class="init" >
                      <img v-if="it.videoId != ''" src="../assets/play.png" alt="" />
                      <img v-else src="../assets/suo.png" alt="" />
                      {{it.name}}
                    </div>
                    <div class="duration" v-if="it.videoTime != 0">时长:{{it.videoTime}}</div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="tecaherBox" v-if="courseDetail.CourseTeachers">
          <div class="teaDetails" v-for="(item,index) in courseDetail.CourseTeachers" :key="index">
            <div class="lecturer">{{item.Teacher.School.name}}</div>
            <div class="imgBox"><img :src="$store.state.api +'?path= '+item.Teacher.avatar" alt="" /></div>
            <h5>{{item.Teacher.name}}</h5>
            <span>{{item.Teacher.School.name}} {{item.Teacher.title}}</span>
            <p>
              {{item.Teacher.brief}}
            </p>
          </div>
          <div class="aboutLesson">
            <div class="title">相关课程</div>
            <ul>
              <li v-for="(item,index) in course" :key="index">
                <router-link
                  :to="{ path: '/lessonIntroduce/' + item.id }"
                >
                  <div class="imgBox">
                    <img :src="$store.state.apiFile + item.fm" alt="" />
                  </div>
                  <div class="textBox">
                    <h5>{{item.name}}</h5>
                    <p>{{item.selCount}}人在学</p>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { COURSELIST} from '@/api/api';
import { _axios } from '@/api/_axios';
import { Time } from '@/api/common';
export default {
  components: {},
  data() {
    return {
      courseDetail:[],
      activeName: "first",
      mulu: "",
      course:[]
    };
  },
   watch:{
    $route:{
      handler(val,oldval){
        if(val.params.id != oldval.params.id){
          this.getDetails()
          document.body.scrollTop = document.documentElement.scrollTop = 0
        }
      },
      // 深度观察监听
      deep: true
    }
  },
   mounted(){
    this.getDetails()
  },
  methods: {
     getDetails(){
      const id = this.$route.params.id;
      _axios(COURSELIST+'/'+ id,{
      },'get').then(res => {
        console.log('详情',res)
        if(res.data.Chapters.length > 0){
          res.data.Chapters.forEach(item => {
            if(item.children.length > 0){
              item.children.forEach(it => {
                if(it.videoTime){
                  it.videoTime = Time(it.videoTime)
                }
              })
            }
          })
        }
        this.getCourse(res.data.catId)
        this.courseDetail = res.data
      })
    },
    getCourse(id){
       _axios(
        COURSELIST,
        {
          page: 1,
          limit: 4,
          catId:id
        },
        "get"
      ).then((res) => {
        console.log("课程", res);
        this.course = res.data;
      });
    },
    handleClick(){}
  },
};
</script>


<style scoped>
.nav {
  margin: 23px 0;
}
.bigBox {
  width: 100%;
  height: 295px;
  display: flex;
  justify-content: flex-start;
}
.bigBox .leftBox {
  width: 525px;
  height: 295px;
}
.bigBox .leftBox img {
  width: 100%;
  height: 100%;
}
.bigBox .rightBox {
  width: 675px;
  height: 296px;
  background-color: #fff;
  padding-left: 36px;
  padding-top: 25px;
  box-sizing: border-box;
}
.bigBox .rightBox h2 {
  font-size: 24px;
  color: #000000;
}
.bigBox .rightBox .best {
  display: inline-block;
  text-align: center;
  width: 70px;
  height: 20px;
  line-height: 20px;
  background-color: #cea260;
  font-size: 12px;
  color: #f3f3f3;
  margin: 15px 10px 15px 0px;
}
.bigBox .rightBox p {
  font-size: 14px;
  color: #999999;
  margin-bottom: 30px;
}
.bigBox .rightBox p span {
  margin-right: 30px;
}
.bigBox .rightBox p b {
  font-size: 32px;
  color: #3d7eff;
}
.lessons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
 /deep/ .lessons .lessDetais .el-tabs__item{
  font-size: 20px;
}
.lessons .lessDetais {
  width: 845px;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.blockList {
  width: 100%;
  margin-top: 30px;
}
.blockList .smallTitle {
  width: 100%;
  font-size: 18px;
  color: #444444;
  position: relative;
  padding-left: 20px;
}
.blockList .smallTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 24px;
  background-color: #3d7eff;
}
.blockList .cont {
  margin: 20px 0;
}
.blockList .cont >>> p {
  font-size: 14px;
  color: #666666;
}
.lessDetais .init img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: middle;
}
/deep/ .el-collapse{
  border-top:0 ;
}
/deep/ .lessDetais .el-collapse-item__content>div{
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom:1px dashed #eee ;
  cursor: pointer;
}
.lessDetais .duration{
  width: 100px;
}
.lessons .tecaherBox {
  width: 338px;
}
.lessons .tecaherBox .teaDetails {
  width: 100%;
  height: 321px;
  background-color: #fff;
  padding: 25px;
  box-sizing: border-box;
}
.lessons .tecaherBox .teaDetails .lecturer {
  font-size: 16px;
  color: #444444;
}
.lessons .tecaherBox .teaDetails .imgBox {
  width: 80px;
  height: 80px;
  margin: 20px auto 16px;
}
.lessons .tecaherBox .teaDetails .imgBox img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.lessons .tecaherBox .teaDetails h5 {
  font-size: 16px;
  color: #333333;
  text-align: center;
}
.lessons .tecaherBox .teaDetails span {
  display: block;
  width: 100%;
  font-size: 12px;
  color: #999999;
  text-align: center;
  margin: 10px 0;
}
.lessons .tecaherBox .teaDetails p {
  font-size: 14px;
  color: #666666;
  line-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.lessons .aboutLesson {
  margin-top: 18px;
  background-color: #fff;
}
.lessons .aboutLesson .title {
  width: 100%;
  height: 59px;
  padding-left: 27px;
  box-sizing: border-box;
  line-height: 59px;
  border-bottom: 1px solid #eeeeee;
}
.lessons .aboutLesson li a{
  padding: 20px;
  display: flex;
  justify-content: flex-start;
}
.lessons .aboutLesson .imgBox {
  width: 138px;
  height: 77px;
  margin-right: 16px;
}
.lessons .aboutLesson .imgBox img {
  width: 100%;
  height: 100%;
}
.lessons .aboutLesson .textBox h5 {
  font-size: 14px;
  color: #444444;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 20px;
}
.lessons .aboutLesson .textBox p {
  font-size: 12px;
  color: #999999;
}
</style>
